<template>
  <div id="index">
    <div class="carousel">
      <swipe class="swipe-container" :auto="0">
        <swipe-item v-for="(item, index) in slides" :key="index">
          <router-link tag="a" :to="'/news/news-detail/' + item.aid">
            <img :src="item.img" alt="">
          </router-link>
        </swipe-item>
      </swipe>
    </div>

    <nav>
      <ul>
        <li v-for="(item, index) in navigators" :key="index" @click="test(index)">
          <router-link
            tag="a"
            :to="item.link">
            <article class="img"></article>
            <h4 v-text="item.name"></h4>
          </router-link>
        </li>
      </ul>
    </nav>

    <grey-header title="保险查询"></grey-header>

    <licence-query type="queryInfo" :showNewButton="true"></licence-query>

    <article class="cooperation">
      <header>
        <img src="../../assets/images/index/cooperation.png" alt="">
        {{ cooperation.title }}
      </header>
      <ul>
        <router-link
          v-for="(item, index) in cooperation.companies"
          :key="index"
          tag="li"
          :to="'/index/introduce/' + item.id">
          <a href="#"></a>
        </router-link>
      </ul>
    </article>

    <!-- 底部导航栏 -->
    <comp-footer></comp-footer>
  </div>
</template>

<script>
  import LicenceQuery from '../comp/licence-query.vue';
  import GreyHeader from '../comp/grey-header.vue';
  import CompFooter from '../comp/comp-footer.vue';
  import { Swipe, SwipeItem, Toast } from 'mint-ui';

  export default {
    name: 'index',
    components: {
      Swipe,
      SwipeItem,
      GreyHeader,
      CompFooter,
      LicenceQuery
    },
    data() {
      return {
        slides: [],
        navigators: [
          {
            name: '活动公告',
            link: '/news/news-type/1'
          },
          {
            name: '保单查询',
            link: '/index/query-order-by-licence'
          },
          {
            name: '违章查询',
            link: ''
          },
          {
            name: '业务动态',
            link: '/news/news-type/2'
          }
        ],
        cooperation: {
          title: '合作公司',
          companies: [
            {
              id: '2'
            },
            {
              id: '3'
            },
            {
              id: '4'
            },
            {
              id: '5'
            },
            {
              id: '6'
            }
          ]
        }
      }
    },
    created() {
      sessionStorage.removeItem('info');
      sessionStorage.removeItem('failureReason');
      this.$http.post({
        api: this.$api.PUBLIC_ADVERT_LIST,
        params: {
          type: 1
        },
        success: function (res) {
          this.slides = res.data.data;
        }.bind(this)
      });
    },
    methods: {
      test(index) {
        if (index === 2) {
          Toast('功能暂未开放');
        }
      }
    }
  }
</script>

<style lang="scss">

  #index {
    position: relative;
    padding-bottom: $comp-footer-height;

    $this-public-gap: 1rem;
    $carousel-height: 15rem;
    $nav-height: 75px;
    $nav-font-size: 1.2rem;
    $nav-color: #333;
    $nav-icon-side: 36px;

    >.carousel {
      height: $carousel-height;

      >.swipe-container {
        height: $size-as-parent;

        a {

          >img {
            width: $size-as-parent;
            height: $size-as-parent;
          }
        }
      }
    }

    >nav {
      height: $nav-height;
      background: $white;

      >ul {
        height: $size-as-parent;
        display: flex;
        justify-content: space-around;
        align-items: center;

        .img {
          width: $nav-icon-side;
          height: $nav-icon-side;
          margin: $margin-auto;
          background: url("../../assets/images/index/nav.png") no-repeat center / auto $nav-icon-side;
        }

        &>li:nth-of-type(1) .img {
          background-position: 0 0;
        }
        &>li:nth-of-type(2) .img {
          background-position: -89px 0;
        }
        &>li:nth-of-type(3) .img {
          background-position: -178px 0;
        }
        &>li:nth-of-type(4) .img {
          background-position: -267px 0;
        }

        h4 {
          font-size: $nav-font-size;
          color: $nav-color;
          margin-top: 6px;
        }
      }
    }

    >.cooperation {

      >header {
        display: flex;
        align-items: center;
        height: 3rem;
        padding-left: $this-public-gap;
        line-height: 3rem;
        font-size: 1.2rem;
        color: #999;

        >img {
          width: 1.2rem;
          height: 1.2rem;
          margin-right: 2px;
        }
      }

      >ul {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        padding: 0 $this-public-gap;

        >li {
          width: 48%;
          height: 66px;
          padding: 0 6px;
          margin-bottom: 4%;
          background: $white;
          box-shadow:  $public-box-shadow;
          border-radius: .6rem;
          display: flex;
          justify-content: space-around;
          align-items: center;

          >a {
            display: block;
            width: 130px;
            height: 40px;
            background: url("../../assets/images/public/companies.png") no-repeat center / $size-as-parent auto;
          }

          &:first-of-type > a {
            background-position-y: 6px;
          }

          &:nth-of-type(2) > a {
            background-position-y: -68px;
          }

          &:nth-of-type(3) > a {
            background-position-y: -142px;
          }

          &:nth-of-type(4) > a {
            background-position-y: -220px;
          }

          &:last-of-type > a {
            background-position-y: -303px;
          }
        }
      }
    }
  }
</style>
